<template>
  <div class="institution">
    <div class="title">
      系统概况
    </div>
    <div class="list">
      <div class="list-item">
        <div class="left">
          <div class="number">
            31
          </div>
          <div class="txt">
            联邦社区
          </div>
        </div>
        <div class="right-1">
          <i class="el-icon-s-data icon" />
        </div>
      </div>
      <div class="list-item">
        <div class="left">
          <div class="number">
            31
          </div>
          <div class="txt">
            主导医疗机构
          </div>
        </div>
        <div class="right-2">
          <i class="el-icon-s-data icon" />
        </div>
      </div>
      <div class="list-item">
        <div class="left">
          <div class="number">
            81
          </div>
          <div class="txt">
            参训医疗机构
          </div>
        </div>
        <div class="right-3">
          <i class="el-icon-s-data icon" />
        </div>
      </div>
      <div class="list-item">
        <div class="left">
          <div class="number">
            1
          </div>
          <div class="txt">
            模型迭代版本
          </div>
        </div>
        <div class="right-4">
          <i class="el-icon-s-data icon" />
        </div>
      </div>
    </div>
    <div class="echarts-box">
      <div class="echart-title">全局模型准确率</div>
      <div class="echart" />
      <div class="tab-list">
        <div v-for="(item, index) in tabList" :key="index" class="tab-item" :class="{ 'active-tab': activeTab === index, 'not-active-tab': activeTab !== index }" @click="activeTab = index">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chartInstance: null,
      tabList: ['肺炎模型', '胸部模型'],
      activeTab: 0
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chartDom = document.querySelector('.echart')
      this.chartInstance = echarts.init(chartDom)
      const option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['准确率']
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false
          },
          data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '准确率',
          type: 'line',
          smooth: true,
          data: [60, 60, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 82, 77, 75, 74, 72, 70],
          areaStyle: {
            color: '#deeccf'
          },
          itemStyle: {
            color: '#deeccf'
          }
        }]
      }
      this.chartInstance.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
    .institution {
        box-sizing: border-box;
        height: calc(100vh - 50px);
        background-color: #f7f8f9;
        padding: 15px 20px;
    }
    .title{
        color: #666666;
    }
    .list{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    .list-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 24%;
        height: 90px;
        background-color: #fff;
        padding: 20px;
    }
    .number{
        font-size: 18px;
        color: #333333;
    }
    .txt{
        font-size: 13px;
        color: #888888;
        margin-top: 12px;
    }
    .right-1{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background-color: #90be55;
    }
    .right-2{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background-color: #e985b2;
    }
    .right-3{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background-color: #57adeb;
    }
    .right-4{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 40px;
        background-color: #dcbc55;
    }
    .icon{
        color: #ffffff;
        font-size: 21px;
    }
    .echarts-box{
        position: relative;
        margin-top: 20px;
        background-color: #fff;
    }
    .tab-list{
        display: flex;
        position: absolute;
        right: 20px;
        top: 20px;
        .tab-item{
            // width: 80px;
            // height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 11px;
            padding: 5px 10px;
        }
        .active-tab{
            background-color: #57adeb;
            color: #ffffff;
        }
        .not-active-tab{
            background-color: #666666;
            color: #ffffff;
        }
    }
    .echart-title{
        height: 60px;
        line-height: 60px;
        padding: 0 20px;
        border-bottom: 1px solid #f7f8f960;
    }
    .echart{
        height: 400px;
        width: 100%;
    }
</style>
